<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>美女1</li>
        <li>美女2</li>
        <li>美女3</li>
        <li>美女4</li>
        <li>美女5</li>
    </ul>

    <div class="tax">
        <div class="img-box">
            <img style="width: 100%;"
                src="https://img1.baidu.com/it/u=1783500417,2981257180&fm=253&fmt=auto&app=120&f=JPEG?w=1880&h=424"
                alt="出租车公司图片" srcset="">
        </div>
        <input type="text" placeholder="请输入公里数" id="licheng">
        <p>起步价: <b>13</b> 元; </p>
        <p> 3公里内: <b>2</b> 元/公里 ;之后 <b>3</b> 元/公里 ; </p>
        <p>是否拥堵: <input type="radio" name="yd" class="yd" id="yd"> 拥堵费 :原价 + <b>10</b> 元 </p>
        <p><span>本次车费 : <b id="total">等待计算</b></span></p>
        <p><input type="button" value="计算车费" id="init"></p>
    </div>
    <script>
        /**
         * 测试闭包与立即执行函数
        */
        let results = (function jisuanjiage() {
            let total = 0;
            let start = 13;
            let isYd = false, licheng = 0;
            (function name(params) {
                document.querySelector('#licheng').addEventListener('change', function (params) {
                    licheng = params.target.value ? params.target.value : 0
                    console.log(licheng)
                })
            })();
            let index = 1
            document.querySelector('.yd').addEventListener('click', function (e) {
                index++
                if (index % 2) {
                    document.querySelector('.yd').checked = false
                }
                isYd = e.target.checked
                console.log(e.target.checked, this);
            })
            return {
                price: function (licheng) {
                    lichengTotal = licheng < 4 ? licheng * 2 : (licheng - 3) * 3 + 3 * 2;
                    return lichengTotal + start;
                },
                render: function (id) {
                    let target = document.querySelector('#' + id)
                    total = this.price(licheng);
                    if (target) {
                        if (isYd) {
                            target.innerText = total + 10 + '元 \t (已包含拥堵费)'
                        } else {
                            target.innerText = total + '元 \t'
                        }
                    }
                    console.log(total, isYd);
                }
            }
        })()
        document.querySelector('#init').addEventListener('click', function (e) {
            results.render('total')
        })

        /**
         * 测试闭包与for 循环
        */
        let lis = document.querySelector('ul').querySelectorAll('li');
        let ul = lis.length > 0 ? lis[0].parentElement : null;
        // ul ? ul.onclick = function (e) {
        //     console.log(e.target.innerText)
        // } : void 0;
        for (let i = 0; i < lis.length; i++) {
            const item = lis[i];
            lis[i].onclick = function () {
                console.log(i);
            }

        }
    </script>
</body>

</html>